<template>
    <div>
        <div style="padding: 0px 0 ;">
            <el-input v-model="input" style="width:200px;" placeholder="根据姓名查找" suffix-icon="el-icon-search"></el-input>
            <el-button style="margin-left: 10px;" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </div>
        <!-- <div style="margin:10px 0;">
            <el-button type="primary" @click="handAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
            <el-button type="primary">批量删除<i class="el-icon-remove-outline"></i></el-button>
        </div> -->
        <el-table ref="table" :data="tableData" style="height: 500px;overflow: auto;" @selection-change="handleSelectionChange"
            :cell-class-name="tableRowClassName">

            <el-table-column prop="name" label="姓名" width="100">
            </el-table-column>
            <el-table-column prop="email" label="电子邮件" width="250">
            </el-table-column>
            <el-table-column prop="phone" label="联系方式" width="140">
            </el-table-column>
            <el-table-column prop="message" label="留言内容" width="140">
            </el-table-column>
            <el-table-column label="是否为答案" width="500">
                <template>
                    <el-table-column type="selection" label="是否为答案"></el-table-column>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!-- <el-button type="success" @click="handEdit(scope.row)">编辑</el-button> -->
                    <el-popconfirm style="margin-left: 5px;" confirm-button-text='确定' cancel-button-text='我在想想'
                        icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="deleteById(scope.row.id)">
                        <el-button type="danger" slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[3, 6, 9, 12]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <el-dialog style="text-align: center;" :title="form.username == null ? '新增用户' : '修改用户'"
            :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="姓名" label-width="120px">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电子邮件" label-width="120px">
                    <el-input v-model="form.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" label-width="120px">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="留言内容" label-width="120px">
                    <el-input v-model="form.message" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDialog">取 消</el-button>
                <el-button type="primary" @click="save">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "Drug",
    data() {
        return {
            tableData: null,
            currentPage4: 4,
            total: 0,
            page: 1,
            pageSize: 6,
            input: '',
            dialogFormVisible: false,
            form: '',
            imageUrl: '',
            roles: [],
            multipleSelection: []
        }
    },
    created() {
        this.load();
    },
    methods: {
        handleSelectionChange(val) {
            if (val.length > 1) {
                this.$refs.table.clearSelection()
                this.$refs.table.toggleRowSelection(val.pop())
            }
            this.multipleSelection = val
            console.log("val==>", val)
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        },
        cancelDialog() {
            this.dialogFormVisible = false;
            this.imageUrl = '';
        },

        deleteById(id) {
            this.request.delete(`/message/${id}`).then(res => {
                if (res.code == 200) {
                    this.$message.success('删除成功')
                    this.load()
                } else {
                    this.$message.success('删除失败')
                }
            })
        },
        save() {//新增提交数据方法
            console.log(this.form);
            this.request.post("/message", this.form).then(res => {
                if (res.code == 200) {
                    this.$message.success("保存成功")
                    this.dialogFormVisible = false
                    this.load();
                } else {
                    this.$message.error("保存失败")
                }
            })
            this.dialogFormVisible = false
            this.load();
        },
        handEdit(row) {//打开编辑窗口
            this.form = row
            this.dialogFormVisible = true
            this.imageUrl = "http://localhost:8081/common/download?name=" + row.image
        },
        handAdd() {//打开新增窗口
            this.dialogFormVisible = true
            this.form = {}
            this.imageUrl = ''
        },
        reset() {//重置按钮方法
            this.input = "";
            this.load();
        },
        load() {//表格刷新
            this.request.get("/message/page", {
                params: {
                    page: this.page,
                    pageSize: this.pageSize,
                    name: this.input
                }
            }).then(res => {
                this.tableData = res.data.records;
                console.log("123", res.data)
                this.total = res.data.total;
            })
        },
        handleSizeChange(pageSize) {//分页每页条数
            this.pageSize = pageSize;
            this.load();
        },
        handleCurrentChange(page) {//分页页码选择
            this.page = page;
            this.load();
        }
    }
}
</script>

<style>
.is-group>tr:last-child {
    display: none;
}

.warning-row {
    background: oldlace;
}

.success-row {
    background: #f0f9eb;
}

.el-table::before {
    height: 0px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>